<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <!--给标题添加图片-->
    <link rel="icon" href="./deng.png" type="image/x-icon">
    <style>
        .background {
            background-image: url("./back2.jpg");
            /* 让背景图完全覆盖容器，保持比例，可能会裁剪部分图片 */
            background-size: cover;
            /* 背景图不重复 */
            background-repeat: no-repeat;
            /* 背景图位置居中 */
            background-position: center center;
            /* 让 body 占满整个视口高度 */
            min-height: 100vh;
            /* 为了让 align-content 生效，需要设置 display 为 flex 等相关布局方式，这里假设要让内部元素居中 */
            display: flex;
            align-items: center;
            justify-content: center;

        }
        .size{
            width: 300px;
            height: 300px;
            /* background-color: aqua; */
            /* display: contents; */
            border-radius: 10px;
            /*添加阴影*/
            box-shadow: 5px 4px 4px 3px rgba(0, 0, 0, 0.4); 
            backdrop-filter: blur(8px);
        }
        /* #head{
            text-align: center;
            font-size: 18px;
            font-family:'微软雅黑' ;
            margin-top: 12px;
        } */
        #name{

            text-align:  center;
            margin-top: 23px;
            height: 30px;
        }
        .ty{
            border-radius: 10px;
            border-width: 5px;
            border: 1px solid #a09999;
            height: 30px;
            padding-left: 10px;
        }
        button{
            width: 218px;
            height: 40px;
            font-size: 22px;
            font-family: '微软雅黑';
            border-radius: 10px;
            border-width: 0px; 
            color: aliceblue;
            background-color: rgb(27, 194, 194);
            margin-bottom: 20px;

        }
        button:hover{
            width: 218px;
            height: 40px;
            font-size: 22px;
            font-family: '微软雅黑';
            border-radius: 10px;
            border-width: 0px; 
            background-color:rgb(27, 194, 194);
            box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4); 
        }
        .rember{
            text-align:  center;
            margin-top: 30px;
            font-family: '微软雅黑';
        }
        #lian{
            color: rgb(182, 106, 205);
            font-family: '微软雅黑';
            font-size: 16px;
        }
        label{
            font-family: '微软雅黑';
        }
        .agree{
            font-family: '微软雅黑';
            margin-top: 20px;
            font-size: 13px;
            text-align:  center;
        }
        #book{
            font-family: '微软雅黑';
            font-size: 13px;
            color: rgb(185, 91, 124);
            text-decoration: none;
        }
    </style>
</head>
<body class="background">
    <div class="size">
        <!-- <div id="head">欢 迎 登 录</div> -->
        <h3>欢迎登录</h3>
        <div id="name">
            <span>姓名</span>&nbsp;<span><input class="ty"  id="user" type="text" placeholder="请输入用户名/QQ" ></span>
        </div>
        <div id="name">
            <span>密码</span>&nbsp;<span><input class="ty" id="pass" type="password" placeholder="请输入用户密码"></span>
        </div>
        <div class="rember">
            <input type="checkbox" id="I">
            <label for="I">记住我</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;
                <!--测试链接-->
                <a id="lian" href="https://www.xiaohongshu.com/explore">忘记密码?</a>
        </div>
         <div id="name">
            <span><button class="custom-btn">提交</button></span>
        </div>
        <div class="agree">
            <input type="radio" id="read">
            <label for="read">我已阅读</label>
            <!--测试链接-->
             <a id="book" href="https://gitee.com/">《网站承诺书》</a>
        </div>
    </div>
    <script>
        let h3=document.querySelector('h3')
        h3.style.textAlign='center'
        //获取元素做出处理
        let btn=document.querySelector('.custom-btn')

        //修正read的触发事件
        let already_read=document.querySelector('#read')
        let num=0;
        already_read.onclick=function()
        {
            //采用采用计数法进行触发事件修正
            num++;
            if(num==1)
                already_read.checked=true
            else
            {
                already_read.checked=false
                num=0;//num清0处理
            }
            //测试
            // alert("click")
        }
        //设置username
        let user='wwp'
        //设置用户密码
        let pass_word='12345'
        btn.onclick=function(){
            let usrname=document.querySelector('#user').value
            let password=document.querySelector('#pass').value
            let read=document.querySelector('#read')
            if(read.checked==false)
                confirm('请查看《网站承诺书》')
            if(usrname==user&&password==pass_word&&read.checked==true)
                window.open('./denglu.html')
                // alert("jjjj")测试
            else if(usrname!=user||password!=pass_word)
                alert('用户名或密码错误')
        }
    </script>
</body>
</html>